<template>
  <ph-view>
    <ph-blockquote type="primary">该组件为独立组件<br/><a href="https://www.npmjs.com/package/ph-slider" target="_blank">npm 地址</a></ph-blockquote>
    <ph-tab>
      <ph-tab-panel title="案例展示">
        <div class="sliders" style="margin-top: 50px">
          <ph-slider :value="value" :max="max" @change="onChange" format="v%" />
          <ph-slider
            :value="value"
            :max="max"
            @change="onChange"
            type="primary"
          />
          <ph-slider
            :value="value"
            :max="max"
            @change="onChange"
            type="danger"
          />
          <ph-slider
            :value="value"
            :max="max"
            @change="onChange"
            type="success"
          />
          <ph-slider :value="value" :max="max" @change="onChange" type="info" />
          <ph-slider
            :value="value"
            :max="max"
            @change="onChange"
            type="warning"
          />
          <ph-slider
            :value="value"
            :max="max"
            @change="onChange"
            :transparent="true"
          />
        </div>
        <ph-pretty>{{ demo }}</ph-pretty>
      </ph-tab-panel>
      <ph-tab-panel title="基本介绍">
        <ph-pretty>{{ basicUsage }}</ph-pretty>
      </ph-tab-panel>
    </ph-tab>
  </ph-view>
</template>
<script lang="ts">
import { defineComponent, ref } from "vue";
import { PhTab, PhTabPanel, PhView, PhSlider, PhBlockquote } from "@/components";
import * as absdf from '@/components'
import * as Data from "../data/slider";
console.log(absdf)
export default defineComponent({
  components: {
    PhSlider, PhBlockquote,
    PhTab,
    PhTabPanel,
    PhView,
  },
  setup() {
    const value = ref(30);
    const max = ref(100);
    const onChange = (v: number) => {
      value.value = v;
    };

    return { value, max, onChange, ...Data };
  },
});
</script>
<style lang="scss">
.sliders {
  .ph-slider {
    margin-bottom: 20px;
  }
}
</style>
